package com.tencent.compose.sample.mainpage.sectionItem

import androidx.compose.foundation.Canvas
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import org.jetbrains.compose.ui.tooling.preview.Preview

@Preview()
@Composable
internal fun CanvasDemo() {

    // 使用Column垂直布局，子元素会从上到下排列
    Column(
        modifier = Modifier.size(300.dp)
    ) {
        // 文本说明放在上方
        Text(
            text = "饼图：红色部分占80%，黄色部分占20%",
            modifier = Modifier.padding(bottom = 16.dp)
        )

        // 饼图放在下方
        Canvas(
            contentDescription = "饼图：红色部分占80%，黄色部分占20%",
            modifier = Modifier.size(200.dp)
        ) {
            // 绘制红色部分（80%）
            drawCircle(
                color = Color.Red,
                radius = size.width / 2
            )

            // 绘制黄色部分（20%）
            drawArc(
                color = Color.Yellow,
                startAngle = 0f,
                sweepAngle = 360f * 0.20f, // 20%对应的角度
                useCenter = true,
                topLeft = Offset(0f, (size.height - size.width) / 2f),
                size = Size(size.width, size.width)
            )
        }
    }
}
